<template>
	<view class="content-box">
		<!-- 头部navbar -->
		<navbar :fixed="true" :bgColor="'#fff'" :leftIcon="true">
			<template #title>
				<text>{{t('ranking.phb')}}</text>
			</template>
		</navbar>

		<!-- 筛选按钮区域 -->
		<view class="filter-section">
			<view class="border-box">
				<view class="filter-btn" :class="{ active: activeFilter === 'today' }" @click="setFilter('today')">
					<text>{{ t('ranking.jr') }}</text>
				</view>
				<view class="filter-btn" :class="{ active: activeFilter === 'total' }" @click="setFilter('total')">
					<text>{{ t('ranking.zj') }}</text>
				</view>
			</view>
		</view>

		<!-- 背景图片区域 -->
		<view class="bg-image-container">
			<image class="bg-image" src="/static/icon/bg4.svg" mode="aspectFit"></image>
		</view>

		<!-- 排行榜列表 -->
		<view class="ranking-list">
			<!-- 加载状态 -->
			<view v-if="loading" class="loading-container">
				<text class="loading-text">{{ t('common.loading') || '加载中...' }}</text>
			</view>
			
			<!-- 空数据状态 -->
			<view v-else-if="rankingData.length === 0" class="empty-container">
				<text class="empty-text">{{ t('ranking.noData') || '暂无排行榜数据' }}</text>
			</view>
			
			<!-- 排行榜数据 -->
			<view v-else class="ranking-item" v-for="(item, index) in rankingData" :key="index">
				<view class="item-box">
					<view class="rank-info">
						<view class="first-img" v-if="index == 0">
							<view class="gradient-box">
								<image class="avatar" :src="item.avatar" mode="aspectFit" @error="handleImageError"></image>
								<image class="crown-icon" src="/static/icon/huangguan.svg" mode="aspectFit" />
							</view>
						</view>
						<view class="img-box" v-else-if="index == 1">
							<view class="img-border">
								<image class="" src="/static/image/home/ranking-2.png" mode="aspectFit" />
							</view>
							<image class="avatar avatar2" :src="item.avatar" mode="aspectFit" @error="handleImageError"></image>
						</view>
						<view class="img-box" v-else-if="index == 2">
							<view class="img-border">
								<image class="crown-icon" src="/static/image/home/ranking-3.png" mode="aspectFit" />
							</view>
							<image class="avatar avatar3" :src="item.avatar" mode="aspectFit" @error="handleImageError"></image>
						</view>
						<view class="img-box" v-else>
							<image class="avatar" :src="item.avatar" mode="aspectFit" @error="handleImageError"></image>
						</view>
						<text class="username">{{ item.username }}</text>
					</view>
					<view class="reward-amount">
						<text class="amount">{{ item.amount }}</text>
						<text class="currency">USDT</text>
					</view>
				</view>

			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		onMounted
	} from 'vue';
	import {
		useI18n
	} from 'vue-i18n';
	import { inviteApi } from '@/utils/api.js';
	
	const {
		t,
		locale
	} = useI18n();

	// 响应式数据
	const activeFilter = ref('today');
	const loading = ref(false);

	// 排行榜数据
	const rankingData = ref([]);

	// 获取排行榜数据
	const fetchRankingData = async (type = 'today') => {
		try {
			loading.value = true;
			
			// 尝试调用真实API
			const params = {
				type: type === 'today' ? 1 : 2, // 1: 今日, 2: 总计
				pageNo: 1,
				pageSize: 10
			};
			
			const response = await inviteApi.getTotalProfitRank(params);
			
			// 处理API响应数据
			let dataList = [];
			if (response && response.data) {
				// 尝试多种可能的数据结构
				if (response.data.list) {
					dataList = response.data.list;
				} else if (response.data.records) {
					dataList = response.data.records;
				} else if (Array.isArray(response.data)) {
					dataList = response.data;
				} else if (response.data.data && Array.isArray(response.data.data)) {
					dataList = response.data.data;
				}
			}
			
			// 映射数据到组件需要的格式
			if (dataList && dataList.length > 0) {
				rankingData.value = dataList.map(item => ({
					username: item.username || item.nickName || item.nick_name || item.name || item.userName || '未知用户',
					amount: item.amount || item.totalAmount || item.total_amount || item.profit || item.totalProfit || item.total_profit || '0',
					avatar: item.avatar || item.avatarUrl || item.avatar_url || item.headImg || item.head_img || '/static/image/home/invite/avatar.svg'
				}));
			} else {
				// 如果没有数据，使用测试数据
				if (type === 'today') {
					rankingData.value = [
						{
							username: 'Alice****123',
							amount: '125,680',
							avatar: '/static/image/home/invite/avatar.svg'
						},
						{
							username: 'Bob****456',
							amount: '98,450',
							avatar: '/static/image/home/invite/avatar.svg'
						},
						{
							username: 'Charlie****789',
							amount: '76,320',
							avatar: '/static/image/home/invite/avatar.svg'
						}
					];
				} else {
					rankingData.value = [
						{
							username: 'Frank****678',
							amount: '856,420',
							avatar: '/static/image/home/invite/avatar.svg'
						},
						{
							username: 'Grace****901',
							amount: '734,580',
							avatar: '/static/image/home/invite/avatar.svg'
						},
						{
							username: 'Henry****234',
							amount: '612,340',
							avatar: '/static/image/home/invite/avatar.svg'
						}
					];
				}
			}
		} catch (error) {
			console.error('获取排行榜数据失败:', error);
			
			// 如果API调用失败，使用测试数据作为fallback
			if (type === 'today') {
				rankingData.value = [
					{
						username: 'Alice****123',
						amount: '125,680',
						avatar: '/static/image/home/invite/avatar.svg'
					},
					{
						username: 'Bob****456',
						amount: '98,450',
						avatar: '/static/image/home/invite/avatar.svg'
					},
					{
						username: 'Charlie****789',
						amount: '76,320',
						avatar: '/static/image/home/invite/avatar.svg'
					}
				];
			} else {
				rankingData.value = [
					{
						username: 'Frank****678',
						amount: '856,420',
						avatar: '/static/image/home/invite/avatar.svg'
					},
					{
						username: 'Grace****901',
						amount: '734,580',
						avatar: '/static/image/home/invite/avatar.svg'
					},
					{
						username: 'Henry****234',
						amount: '612,340',
						avatar: '/static/image/home/invite/avatar.svg'
					}
				];
			}
			
			// 可以在这里显示错误提示
			uni.showToast({
				title: '获取数据失败，显示测试数据',
				icon: 'none'
			});
		} finally {
			loading.value = false;
		}
	};

	// 方法
	const setFilter = (filter) => {
		activeFilter.value = filter;
		fetchRankingData(filter);
	};

	// 图片加载错误处理
	const handleImageError = (e) => {
		// 当头像加载失败时，使用默认头像
		e.target.src = '/static/image/home/invite/avatar.svg';
	};

	// 组件挂载时获取数据
	onMounted(() => {
		fetchRankingData('today');
	});
</script>

<style scoped lang="scss">
	.content-box {
		min-height: 100vh;
		background-color: #F5F6FA;
		padding-bottom: 100rpx;
		padding: 34.89rpx 43.61rpx;
		box-sizing: border-box;
	}

	// 筛选按钮区域
	.filter-section {
		display: flex;
		box-sizing: border-box;
		background: linear-gradient(90deg, rgba(14, 194, 157, 1) 0%, rgba(88, 218, 221, 1) 35.42%, rgba(25, 162, 203, 1) 68.75%, rgba(2, 124, 217, 1) 100%);
		border-radius: 27.91rpx;
		padding: 2rpx;

		.border-box {
			width: 100%;
			display: flex;
			align-items: center;
			border-radius: 27.91rpx;
			background-color: #Fff;
			padding: 13.95rpx 17.44rpx;
		}
	}

	.filter-btn {
		flex: 1;
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 17.44rpx;
		transition: all 0.3s ease;

		text {
			font-size: 27.91rpx;
			font-weight: 500;
			letter-spacing: 0rpx;
			line-height: 40.42rpx;
			color: rgba(102, 102, 102, 1);
			// transition: all 0.3s ease;
			padding: 17.90rpx 0;
		}

		&.active {
			// padding: 13.95rpx 0;
			border-radius: 17.44rpx;
			background: linear-gradient(90deg, rgba(12, 193, 155, 1) 0%, rgba(91, 220, 222, 1) 34.03%, rgba(5, 145, 198, 1) 65.97%, rgba(2, 120, 220, 1) 100%);
			// background: linear-gradient(90deg, #0CC19B 0%, #5BDCDE 34.03%, #0591C6 65.97%, #0278DC 100%);

			text {
				font-size: 27.91rpx;
				font-weight: 500;
				letter-spacing: 0rpx;
				line-height: 40.42rpx;
				color: rgba(255, 255, 255, 1);
			}
		}
	}

	// 背景图片区域
	.bg-image-container {
		display: flex;
		justify-content: center;
		margin-top: 62.29rpx;

		.bg-image {
			width: 409.91rpx;
			height: 421.29rpx;
		}
	}



	// 排行榜列表
	.ranking-list {
		margin-top: 48.85rpx;

		// 加载状态
		.loading-container {
			display: flex;
			justify-content: center;
			align-items: center;
			padding: 100rpx 0;

			.loading-text {
				font-size: 28rpx;
				color: rgba(102, 102, 102, 1);
			}
		}

		// 空数据状态
		.empty-container {
			display: flex;
			justify-content: center;
			align-items: center;
			padding: 100rpx 0;

			.empty-text {
				font-size: 28rpx;
				color: rgba(153, 153, 153, 1);
			}
		}

		.ranking-item {
			display: flex;
			border-bottom: 1.74rpx solid rgba(74, 73, 73, 0.2);
			padding-top: 24.42rpx;
			padding-bottom: 10.67rpx;

			&:last-child {
				border-bottom: none;
			}

			.item-box {
				width: 100%;
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding-left: 71.52rpx;

				.rank-info {
					display: flex;
					align-items: center;

					.first-img {
						border-radius: 50%;

						.gradient-box {
							position: relative;
							width: 106.4rpx;
							height: 106.4rpx;
							padding: 8.72rpx;
							box-sizing: border-box;
							background: linear-gradient(148.77deg, rgba(121, 72, 234, 1) 0%, rgba(227, 60, 100, 0.22) 100%, rgba(0, 0, 0, 0) 101%);
							border-radius: 50%;

							.avatar {
								width: 100%;
								height: 100%;
								background-color: #ff8d1a;
								border-radius: 50%;
							}

							.crown-icon {
								width: 79.39rpx;
								height: 79.39rpx;
								position: absolute;
								top: -56rpx;
								left: -30rpx;
							}
						}
					}

					.img-box {
						border-radius: 50%;
						position: relative;
						display: flex;
						justify-content: center;
						align-items: center;

						.img-border {
							position: absolute;
							width: 106.4rpx;
							height: 106.4rpx;

							image {
								width: 107rpx;
								height: 136rpx;
								z-index: 99;
							}
						}

						.avatar2 {
							background-color: #7948ea;
						}

						.avatar3 {
							background-color: #ffc300;
						}

						.avatar {
							width: 106.4rpx;
							height: 106.4rpx;
							padding: 8.72rpx;
							box-sizing: border-box;
							border-radius: 50%;
						}
					}

					.username {
						font-size: 27.91rpx;
						font-weight: 400;
						line-height: 40.42rpx;
						color: rgba(51, 51, 51, 1);
						margin-left: 31.4rpx;
					}

				}
			}

		}
	}


	.reward-amount {
		// display: flex;
		// align-items: center;
		gap: 10rpx;
		background: rgba(48, 129, 236, 0.1);
		border-radius: 20.93rpx;
		padding: 8.72rpx 17.44rpx;
		// border: 1rpx solid rgba(48, 129, 236, 0.3);
		// opacity: 1;
		border-radius: 13.95rpx;
		background: rgba(48, 129, 236, 0.2);
		border: 1.74rpx solid rgba(48, 129, 236, 1);

		.amount {
			font-size: 27.91rpx;
			font-weight: 300;
			letter-spacing: 0rpx;
			line-height: 40.42rpx;
			color: rgba(0, 0, 0, 1);
			margin-right: 6.98rpx;
		}

		.currency {
			font-size: 20.93rpx;
			font-weight: 300;
			letter-spacing: 0rpx;
			line-height: 30.32rpx;
			color: rgba(0, 0, 0, 1);
		}
	}
</style>